<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>退款申请审核系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .login-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .login-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            padding: 2rem;
            width: 100%;
            max-width: 400px;
        }
        .main-container {
            display: none;
        }
        .navbar-brand {
            font-weight: bold;
        }
        .refund-card {
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
        }
        .refund-card:hover {
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }
        .status-badge {
            font-size: 0.8rem;
        }
        .attachment-preview {
            max-width: 150px;
            max-height: 150px;
            object-fit: cover;
            border-radius: 8px;
            cursor: pointer;
            margin: 5px;
        }
        .modal-img {
            max-width: 100%;
            max-height: 80vh;
            object-fit: contain;
        }
        .audit-section {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 1.5rem;
            margin-top: 1rem;
        }
        .loading {
            display: none;
            text-align: center;
            padding: 2rem;
        }
        .error-message {
            color: #dc3545;
            margin-top: 0.5rem;
        }
        
        /* 统计报表详情弹窗样式 */
        .refund-detail {
            font-size: 14px;
        }
        
        .detail-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dee2e6;
        }
        
        .detail-section {
            margin-bottom: 20px;
        }
        
        .detail-section h6 {
            color: #495057;
            font-weight: 600;
            margin-bottom: 10px;
            padding-bottom: 5px;
            border-bottom: 1px solid #e9ecef;
        }
        
        .detail-section p {
            margin-bottom: 8px;
            line-height: 1.5;
        }
        
        .attachments-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 15px;
            margin-top: 10px;
        }
        
        .attachment-item {
            text-align: center;
        }
        
        .attachment-name {
            font-size: 12px;
            color: #6c757d;
            margin-top: 5px;
            margin-bottom: 0;
            word-break: break-all;
        }
        
        .attachment-preview:hover {
            transform: scale(1.05);
            transition: transform 0.2s ease;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <!-- 登录页面 -->
    <div id="loginContainer" class="login-container">
        <div class="login-card">
            <div class="text-center mb-4">
                <img src="static/fylog1d.png" alt="系统Logo" style="width: 80px; height: 80px; margin-bottom: 1rem;">
                <h3 class="mt-2">退款申请审核系统</h3>
                <p class="text-muted">请登录以继续</p>
            </div>
            <form id="loginForm">
                <div class="mb-3">
                    <label for="username" class="form-label">用户名</label>
                    <input type="text" class="form-control" id="username" required>
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" class="form-control" id="password" required>
                </div>
                <div id="loginError" class="error-message"></div>
                <button type="submit" class="btn btn-primary w-100" id="loginBtn">
                    <span class="spinner-border spinner-border-sm d-none" id="loginSpinner"></span>
                    登录
                </button>
            </form>
        </div>
    </div>

    <!-- 主界面 -->
    <div id="mainContainer" class="main-container">
        <!-- 顶部导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <div class="container-fluid">
                <span class="navbar-brand">
                    <img src="static/fyloga.png" alt="系统Logo" style="height: 32px; margin-right: 10px;">
                    退款申请审核系统
                </span>
                <div class="navbar-nav ms-auto">
                    <span class="navbar-text me-3" id="userInfo"></span>
                    <button class="btn btn-outline-light btn-sm" id="logoutBtn">
                        <i class="bi bi-box-arrow-right"></i> 退出
                    </button>
                </div>
            </div>
        </nav>

        <div class="d-flex">
            <!-- 左侧导航栏 -->
            <div class="bg-light border-end" style="width: 250px; min-height: calc(100vh - 56px);">
                <div class="list-group list-group-flush">
                    <a href="#" class="list-group-item list-group-item-action active" data-section="audit">
                        <i class="bi bi-clipboard-check me-2"></i>退款审核
                    </a>
                    <a href="#" class="list-group-item list-group-item-action" data-section="auditComments">
                        <i class="bi bi-chat-text me-2"></i>审核意见维护
                    </a>
                    <a href="#" class="list-group-item list-group-item-action" data-section="statistics">
                        <i class="bi bi-bar-chart me-2"></i>统计报表
                    </a>
                    <a href="#" class="list-group-item list-group-item-action" data-section="summary">
                        <i class="bi bi-file-earmark-text me-2"></i>汇总提交
                    </a>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="flex-grow-1 p-4">
                <!-- 退款审核页面 -->
                <div id="auditSection" class="content-section">
                    <!-- 查询条件 -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h6 class="mb-0"><i class="bi bi-search"></i> 查询条件</h6>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label class="form-label">患者ID</label>
                                    <input type="text" class="form-control" id="searchPatientId" placeholder="请输入患者ID">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">患者姓名</label>
                                    <input type="text" class="form-control" id="searchPatientName" placeholder="请输入患者姓名">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">申请日期</label>
                                    <select class="form-select" id="searchDateRange">
                                        <option value="30">最近30天</option>
                                        <option value="7">最近7天</option>
                                        <option value="15">最近15天</option>
                                        <option value="60">最近60天</option>
                                        <option value="90">最近90天</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">审核状态</label>
                                    <select class="form-select" id="searchAuditStatus">
                                        <option value="">全部状态</option>
                                        <option value="0">待审核</option>
                                        <option value="1">审核通过</option>
                                        <option value="2">审核失败</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col">
                                    <button type="button" class="btn btn-primary" id="searchBtn">
                                        <i class="bi bi-search"></i> 查询
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary ms-2" id="resetBtn">
                                        <i class="bi bi-arrow-clockwise"></i> 重置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 退款申请列表 -->
                    <div id="refundListView">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5><i class="bi bi-list-ul"></i> 退款申请列表</h5>
                            <div>
                                <span class="text-muted me-3" id="totalCount">共 0 条记录</span>
                                <button class="btn btn-outline-primary btn-sm" id="refreshBtn">
                                    <i class="bi bi-arrow-clockwise"></i> 刷新
                                </button>
                            </div>
                        </div>
                        
                        <div id="refundList"></div>
                        
                        <!-- 分页控件 -->
                        <div class="d-flex justify-content-between align-items-center mt-4">
                            <div class="d-flex align-items-center">
                                <span class="me-2">每页显示：</span>
                                <select class="form-select form-select-sm" id="pageSizeSelect" style="width: auto;">
                                    <option value="10">10条</option>
                                    <option value="20" selected>20条</option>
                                    <option value="50">50条</option>
                                </select>
                            </div>
                            <nav>
                                <ul class="pagination pagination-sm mb-0" id="pagination">
                                    <!-- 分页按钮将通过JavaScript生成 -->
                                </ul>
                            </nav>
                        </div>
                        
                        <div id="loadingRefunds" class="loading">
                            <div class="spinner-border text-primary"></div>
                            <p class="mt-2">加载中...</p>
                        </div>
                    </div>

                    <!-- 退款申请详情 -->
                    <div id="refundDetailView" style="display: none;">
                        <div class="row mb-3">
                            <div class="col">
                                <button class="btn btn-outline-secondary" id="backToListBtn">
                                    <i class="bi bi-arrow-left"></i> 返回列表
                                </button>
                            </div>
                        </div>
                        <div id="refundDetail"></div>
                    </div>
                </div>

                <!-- 审核意见维护页面 -->
                <div id="auditCommentsSection" class="content-section" style="display: none;">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5><i class="bi bi-chat-text"></i> 审核意见维护</h5>
                        <button type="button" class="btn btn-primary" id="addCommentBtn">
                            <i class="bi bi-plus-circle"></i> 新增审核意见
                        </button>
                    </div>
                    
                    <!-- 审核意见列表 -->
                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0">审核意见列表</h6>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>审核意见</th>
                                            <th>创建时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="auditCommentsTableBody">
                                        <!-- 动态加载内容 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 统计报表页面 -->
                <div id="statisticsSection" class="content-section" style="display: none;">
                    <h5><i class="bi bi-bar-chart"></i> 统计报表</h5>
                    
                    <!-- 统计查询条件 -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h6 class="mb-0"><i class="bi bi-funnel"></i> 统计条件</h6>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label class="form-label">开始日期</label>
                                    <input type="date" class="form-control" id="statsStartDate">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">结束日期</label>
                                    <input type="date" class="form-control" id="statsEndDate">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">审核状态</label>
                                    <select class="form-select" id="statsAuditStatus">
                                        <option value="">全部状态</option>
                                        <option value="0">待审核</option>
                                        <option value="1">审核通过</option>
                                        <option value="2">审核失败</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">申请人类型</label>
                                    <select class="form-select" id="statsApplicantType">
                                        <option value="">全部类型</option>
                                        <option value="self">本人申请</option>
                                        <option value="proxy">代办人申请</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col">
                                    <button type="button" class="btn btn-primary" id="generateStatsBtn">
                                        <i class="bi bi-bar-chart-line"></i> 生成统计
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary ms-2" id="resetStatsBtn">
                                        <i class="bi bi-arrow-clockwise"></i> 重置
                                    </button>
                                    <button type="button" class="btn btn-success ms-2" id="exportStatsBtn">
                                        <i class="bi bi-download"></i> 导出Excel
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 统计概览 -->
                    <div class="row mb-4" id="statsOverview" style="display: none;">
                        <div class="col-md-3">
                            <div class="card text-center">
                                <div class="card-body">
                                    <h5 class="card-title text-primary" id="totalApplications">0</h5>
                                    <p class="card-text">总申请数</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-center">
                                <div class="card-body">
                                    <h5 class="card-title text-success" id="approvedApplications">0</h5>
                                    <p class="card-text">审核通过</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-center">
                                <div class="card-body">
                                    <h5 class="card-title text-danger" id="rejectedApplications">0</h5>
                                    <p class="card-text">审核失败</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-center">
                                <div class="card-body">
                                    <h5 class="card-title text-warning" id="pendingApplications">0</h5>
                                    <p class="card-text">待审核</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 统计详细列表 -->
                    <div class="card" id="statsDetailCard" style="display: none;">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">统计详细数据</h6>
                                <span class="text-muted" id="statsCount">共 0 条记录</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th>申请ID</th>
                                            <th>患者姓名</th>
                                            <th>申请金额</th>
                                            <th>申请日期</th>
                                            <th>审核状态</th>
                                            <th>申请人类型</th>
                                            <th>审核人</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="statsDetailTableBody">
                                        <!-- 动态加载内容 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div id="loadingStats" class="loading">
                        <div class="spinner-border text-primary"></div>
                        <p class="mt-2">正在生成统计...</p>
                    </div>
                </div>

                <!-- 汇总提交页面 -->
                <div id="summarySection" class="content-section" style="display: none;">
                    <h5><i class="bi bi-file-earmark-text"></i> 汇总提交</h5>
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i> 汇总提交功能正在开发中...
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 图片预览模态框 -->
    <div class="modal fade" id="imageModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">附件预览</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="modalImage" class="modal-img" src="" alt="附件预览">
                </div>
            </div>
        </div>
    </div>

    <!-- 审核意见编辑模态框 -->
    <div class="modal fade" id="commentModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="commentModalTitle">新增审核意见</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="commentForm">
                        <div class="mb-3">
                            <label for="commentText" class="form-label">审核意见内容 <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="commentText" rows="3" 
                                      placeholder="请输入审核意见内容..." required></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveCommentBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="api.js?v=20250120001"></script>
    <script src="app.js?v=20250120001"></script>
</body>
</html>